<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <div id="map" @click="getName">我的</div>
    <el-test>
      <div class="head" slot="head">
        <h1>头部{{ key }}</h1>
      </div>
      <div class="ct">
        <h3 style="margin: 0 0 20px 0">内容</h3>
        <List :todos="todos">
          <!-- <h1 slot="id">123</h1> -->
          <p slot-scope="meng" style="background: red; color: #fff">
            <span>{{ meng.item.id }},{{ meng.item.text }}</span>
          </p>
        </List>
      </div>
    </el-test>
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>

<script>
import request from '@/utils/request'
import ElTest from '@/components/HelloWorld'
import List from '@/components/List'
export default {
  name: 'Home',
  data () {
    return {
      key: 1,
      todos: [{ id: 0, text: '小红' }, { id: 1, text: '小刚' }]
    }
  },
  components: {
    ElTest,
    List
  },
  async created () {
    const res = await request({
      url: '/mp/v1_0/user/profile',
      method: 'get',
      params: { id: 1, name: 21 }
    })

    console.log(res)
  },
  methods: {
    getName () {
      if (this.key) {
        console.log(123, 456)
      }
    }
  }
}
</script>
